<template>
    <div>
        <button 
            v-for="(item,index) in btnList" 
            :key="item.id" 
            :class="item.status ? 'color' : '' "
            @click="changeData(index)"
            >
            {{ item.name }}
        </button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            btnList:[
                {
                    id:1,
                    name:"全部",
                    status:true
                },
                {
                    id:2,
                    name:"已完成",
                    status:false
                },        
                {
                    id:3,
                    name:"未完成",
                    status:false
                },
            ]
        }
    },
    methods:{
        /**
         * button的点击事件
         * @i 传过来的索引值(下标)
         */
        changeData(i){
            for(let i = 0 ; i < this.btnList.length ; i++){
                this.btnList[i].status = false
            }
            
            this.btnList.map(item => item.status = false)
            this.btnList[i].status = true
            let newStatus = null
            if(i === 0){
                newStatus = 'all'
            }else if(i === 1){
                newStatus = 'finished'
            }else{
                newStatus = 'unfinished'
            }
            this.$emit('getbottomdata',newStatus)
        }
    }
}
</script>

<style scoped>
    .color{
        color: red;  
    }
</style>